<template>
	<div class="content">
		<div class="tabs" v-if="show === 1">
			<div @click="examFuc(1)" :class="{ active: type === 1 }">考试消息</div>
			<div @click="examFuc(0)" :class="{ active: type === 0 }">系统通知</div>
		</div>
		<div id="c" v-if="show == 1">
			<div class="paperList" v-for="(item, index) in examNewsList" :key="index" @click="detaiShow(item.unid,item.isRead,item.name)">

				<h1><div class="isRead" v-if="!item.isRead"></div>{{ item.name }}</h1>
				<div class="item_a">
					<span>
						<i class="iconfont icon-shijian"></i>
						发布时间：{{ item.createtime }}
					</span>
				</div>
			</div>
			<PgCom v-if=" total > pageSize" :total="total" :pageNo="pageNo" :pageSize="pageSize" @pageNoChange="pageNoChange"></PgCom>
		</div>
		<Empty v-if="(type == 1 && examNewsList.length == 0)" text="暂无考试消息"></Empty>
		<Empty v-if="(type == 0 && examNewsList.length == 0)" text="暂无系统通知"></Empty>
		<!-- 消息详情 -->
		<div v-if="show == 2">
			<Crumbs :item="crumbsItem" @crumbsClick="crumbsClick"></Crumbs>
			<div class="newsDetailTop">
				<img v-if="details.avatar" :src="details.avatar"/>
				<div><h3>{{details.username}}</h3>
				<span>{{details.createtime}}</span></div>
			</div>
			<div class="newsDetailCon">
				<h3>{{details.name}}</h3>
				<div>{{details.content}}</div>
			</div>
			<div v-if="type == 1" class="btnGrad btn" @click="goExam()">去考试</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'mine',
	components: {},
	data() {
		return {
			show: 1,
			pageNo: 1,
			pageSize:6,
			total:0,
			paperPages: 0,
			examNewsList: [],
			crumbsItem: [{ name: '消息通知', url: 1 }], //面包屑导航
			type: 1, //类型
			details: {} //详情内容
		};
	},
	created() {
		this.examnews();
	},
	methods: {
		setCrumbs(name, url) {
			this.crumbsInit();
			let navLi = []
			if(this.type == 1){
				navLi = [
					{ name: '考试消息' , url: 1},
					{ name: name, url: url}
				]
			} else if(this.type == 0){
				navLi = [
					{ name: '系统消息' , url: 0},
					{ name: name, url: url}
				]
			}
			this.crumbsItem = this.crumbsItem.concat(navLi)
		},
		//默认面包屑
		crumbsInit(){
			this.crumbsItem = [{ name: '消息通知', url: 1 }]
		},
		pageNoChange(val) {
			// 分页切换
			this.pageNo = val;
			this.examnews();
		},
		crumbsClick(type) {
			//导航切换事件
			if(type == 1){
				this.show =1
				this.type = 1
			} else if(type == 2){
				this.show = 2
			} else if (type == 3){
				this.show = 2
			} else if(type == 0){
				this.show = 1
				this.type = 0
			}
			this.pageNo = 1
			this.examnews()
		},
		examFuc(type) {
			// TAB切换
			this.type = type;
			this.pageNo = 1;
			this.examnews();
		},
		examnews() {
			// this.show = 1;
			this.axios
				.post('/web/student/student/mine/getNoticeListVO', {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					type: this.type
				})
				.then(res => {
					this.examNewsList = res.list;
					this.total = res.total;
					this.paperPages = res.pages;
				});
		},
		detaiShow(unid,isRead,name) {
			if(this.type == 1){
				this.setCrumbs( name , 2)
			} else if(this.type == 0){
				this.setCrumbs( name , 3)
			}
			this.show = 2;
			this.axios.get(`/web/student/student/mine/getNoticeDetailVO`,
			{params:{unid}}).then(res => {
				this.details = res;
			});
			if(!isRead){
				this.$store.commit('setIsRead')
			}
		},
		goExam(){
			this.$router.push('/onlineexam')
		}
	}
};
</script>

<style scoped>
h1{
	align-items: center;
}
.isRead{
	width: 8px !important;
	height: 8px !important;
	background: #f45c4b;
	margin-left: 0 !important;
	margin-right: 11px;
	border-radius: 50% !important;
	border: none !important;
}
.tabs {
	margin-top: 40px;
}

.newsDetailCon h3{
	font-size: 24px;
	color: #363940;
	text-align: center;
	margin-bottom: 55px;
}
.newsDetailCon>div{
	line-height: 36px;
	color: #6B7180;
	font-size: 20px;
}
/deep/.finalQues_a span:nth-child(2){
	display: none;
}
</style>

